<template>
  <div class="myContainer">
    <el-tabs type="border-card">
      <el-tab-pane label="计划基础信息">
        <el-row class="myPaddingBottom_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            计划名称 :
          </el-col>
          <el-col :span="8">
            <el-input placeholder="计划名称" v-model="name" :readonly="disabled"></el-input>
          </el-col>
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            计划状态 :
          </el-col>
          <el-col :span="4" class="myLineHeight_45px">
            <template>
              <el-radio-group v-model="status">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="-2">禁用</el-radio>
              </el-radio-group>
            </template>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            计划ID :
          </el-col>
          <el-col :span="8">
            <el-input placeholder="计划ID" v-model="id" :readonly="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            计划所属小区 :
          </el-col>
          <el-col :span="8">
            <el-input placeholder="计划所属小区" v-model="area_name" :readonly="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            计划模板 :
          </el-col>
          <el-col :span="8">
            <el-input placeholder="计划模板" v-model="templatename" :readonly="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            计划对象 :
          </el-col>
          <el-col :span="8">
            <el-input placeholder="计划对象" v-model="obj" :readonly="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            计划周期 :
          </el-col>
          <el-col :span="8">
            <el-input placeholder="计划周期" v-model="cycle" :readonly="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            计划负责人 :
          </el-col>
          <el-col :span="8">
            <el-input placeholder="计划负责人" v-model="charge_username" :readonly="disabled"></el-input>
          </el-col>
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            联系电话 :
          </el-col>
          <el-col :span="8">
            <el-input placeholder="联系电话" v-model="charge_userphone" :readonly="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            计划检查人 :
          </el-col>
          <el-col :span="8">
            <el-input placeholder="计划检查人" v-model="check_username" :readonly="disabled"></el-input>
          </el-col>
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            联系电话 :
          </el-col>
          <el-col :span="8">
            <el-input placeholder="联系电话" v-model="check_userphone" :readonly="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            计划内任务数量 :
          </el-col>
          <el-col :span="8">
            <el-input placeholder="计划内任务数量" v-model="plancount" :readonly="disabled"></el-input>
          </el-col>
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            计划内单个任务执行期限 :
          </el-col>
          <el-col :span="8">
            <el-input placeholder="计划内单个任务执行期限" v-model="expecttime" :readonly="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="3" class="myLeftMsg">
            第一个任务开始时间 :
          </el-col>
          <el-col :span="8">
            <el-date-picker
              v-model="firstplan_starttime"
              :readonly="disabled"
              type="date"
              placeholder="第一个任务开始时间">
            </el-date-picker>
          </el-col>
          <el-col :span="3" class="myLeftMsg">
            第一个任务截至时间 :
          </el-col>
          <el-col :span="8">
            <el-date-picker
              v-model="firstplan_endtime"
              :readonly="disabled"
              type="date"
              placeholder="第一个任务开始时间">
            </el-date-picker>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="3" class="myLeftMsg">
            最后一次任务开始时间 :
          </el-col>
          <el-col :span="8">
            <el-date-picker
              v-model="lastplan_starttime"
              :readonly="disabled"
              type="date"
              placeholder="第一个任务开始时间">
            </el-date-picker>
          </el-col>
          <el-col :span="3" class="myLeftMsg">
            最后一次任务截至时间 :
          </el-col>
          <el-col :span="8">
            <el-date-picker
              v-model="lastplan_endtime"
              :readonly="disabled"
              type="date"
              placeholder="最后一次任务截至时间">
            </el-date-picker>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="15" :offset="3">
            <!-- <el-button type="primary" class="myBgGreen">保存</el-button> -->
            <el-button type="primary" class="myBgGreen" @click="onClose">关闭</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="计划执行项目">
        <!-- <el-row>
          <el-col>
            <el-form :inline="true" >
              <el-form-item>
                <el-input v-model="searchKW" class="myDialogSearchText" placeholder="输入关键字进行搜索"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" class="myBgGreen">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :span="24">
            <template>
              <el-table
                :data="subjects"
                border
                stripe
                v-loading="loading"
                @selection-change="handleSelectionChange"
                style="width: 100%">
                <el-table-column
                  type="selection"
                  width="100">
                </el-table-column>
                <el-table-column
                  type="index"
                  label="序号"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="subjectname"
                  label="执行项名称">
                </el-table-column>
              </el-table>
            </template>
          </el-col>
        </el-row>
        <!-- 分页控件 start -->
        <!-- <div class="block">                    
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page_num"
            :page-sizes="[10, 15]"
            :page-size="page_size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div> -->
        <!-- 分页控件 end -->
        <el-row class="myPaddingTop_10px">
          <el-col :span="24">
            <el-button type="primary" class="myBgGreen" @click="onClose">关闭</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="计划内任务">
        <!-- <el-row class="myPaddingTop_10px">
          <el-col>
            <el-form :inline="true" >
              <el-form-item>
                <el-input v-model="searchKW" class="myDialogSearchText" placeholder="输入关键字进行搜索"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" class="myBgGreen">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :span="24">
            <template>
              <el-table
                v-loading="loading"
                :data="task_list"
                border
                stripe
                @selection-change="handleSelectionChange"
                style="width: 100%">
                <el-table-column
                  type="selection"
                  width="100">
                </el-table-column>
                <el-table-column
                  type="index"
                  label="序号"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="任务名称">
                </el-table-column>
                <el-table-column
                  prop="charge_username"
                  label="责任人">
                </el-table-column>
                <el-table-column
                  prop="check_username"
                  label="检查人">
                </el-table-column>
                <el-table-column
                  prop="deal_username"
                  label="执行人">
                </el-table-column>
                <el-table-column
                  label="当前状态">
                  <template scope="scope">
                    <span>{{scope.row.status | taskStatusText}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="completetime"
                  label="任务完成时间">
                </el-table-column>
                <!-- <el-table-column
                  label="操作">
                  <template scope="scope">
                    <el-button class="look" type="text" size="small">查看</el-button>
                  </template>
                </el-table-column> -->
              </el-table>
            </template>
          </el-col>
        </el-row>
        <!-- 分页控件 start -->
        <!-- <div class="block">                    
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page_num"
            :page-sizes="[10, 15]"
            :page-size="page_size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div> -->
        <!-- 分页控件 end -->
        <el-row class="myPaddingTop_10px">
          <el-col :span="24">
            <el-button type="primary" class="myBgGreen" @click="onClose">关闭</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top: 2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myLineHeight_45px{
    line-height: 45px;    
  }
  .mymarginTop_10px{
    margin-top: 10px;
  }
  .myDialogSearchText{
    width: 360px;
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }
</style>
<script>
  import { getMaintenancePlanDetail , taskStatus } from '@/api/maintenanceplan';
  export default {
    data(){
      return{
        disabled:true,
        newPersonnelDialogVisible:false,
        searchKW:"",
        startDateValue:"",
        endDateValue:"",
        lastStartDateValue:"",
        lastEndDateValue:"",
        tableDataList:[],
        page_num:1,
        page_size:10,
        total:null,
        id:"",
        name:"",
        area_name:"",
        obj:"",
        cycle:"",
        plancount:"",
        lastplan_endtime:"",
        firstplan_endtime:"",
        status:"",
        templateid:"",
        templatename:"",
        charge_userid:"",
        charge_username:"",
        charge_userphone:"",
        check_userid:"",
        check_username:"",
        check_userphone:"",
        expecttime:"",
        subjects:[],
        task_list:[],
        firstplan_starttime:"",
        lastplan_starttime:"",
        taskStatus:taskStatus,
        loading:false
      }
    },
    components: {
        
    },
    filters: {
      taskStatusText: function(value) {
        return taskStatus[value];
      }
    },
    mounted(){
      document.title = '模板任务计划管理';
      this.id = this.$route.query.id;
      this.onGetMaintenancePlanDetail();
    },
    methods:{     
      onClose:function(){
        this.$router.push({
          path:'/wbjhgl'
        })
      },
      handleSelectionChange:function(val){

      },
      handleSizeChange(val) {//每页条数控制
        this.page_size = val;
      },
      handleCurrentChange(val) {//每页
        this.page_num = val;
      },
      onGetMaintenancePlanDetail(){//拉取计划详细
        let vm=this;
        vm.loading=true;
        getMaintenancePlanDetail(vm.id).then(response => {
          let res=response.data;
          vm.name=res.name;//计划名称
          vm.area_name=res.area_name;//所属小区id
          vm.obj=res.target_objectname;//计划对象
          vm.cycle=res.peroid;//计划周期
          vm.plancount=res.plancount;//计划数量
          vm.firstplan_starttime=res.firstplan_starttime;//第一次任务开始时间
          vm.firstplan_endtime=res.firstplan_endtime;//第一次任务结束时间
          vm.lastplan_endtime=res.lastplan_endtime;//最后一次任务开始时间
          vm.lastplan_starttime=res.lastplan_starttime;//最后一次任务结束时间
          vm.templateid=res.templateid;//模板id
          vm.templatename=res.template_name;//模板id
          vm.charge_userid=res.charge_userid;//负责人id
          vm.charge_username=res.charge_username;//负责人名称
          vm.charge_userphone=res.charge_userphone;//负责人电话
          vm.check_userid=res.check_userid;//检查人id
          vm.check_username=res.check_username;//检查人名称
          vm.check_userphone=res.check_userphone;//检查人电话
          vm.expecttime=res.expecttime;//单个任务执行期限
          vm.subjects=res.subjects;//执行项列表
          vm.task_list=res.task_list;//计划内任务列表
          if(res.status!=-2){
            vm.status=1;
          }else{
            vm.status=res.status;//计划状态-2为禁用 其他为启用
          }
          vm.loading=false;
          // console.log("拉取任务详细成功",res)
        }).catch(error =>{
          vm.loading=false;
          // console.log("拉取任务详细失败",error)
        })
      }
    }
  }
</script>



